<template>
  <NavBar  :color="'#000'" :size="26" brg='#fff' top='75rpx'>
  <view class="about-us-container">

    <!-- 主内容区域 -->
    <view class="main-content">
      <!-- 应用信息区域 -->
      <view class="app-info-section">
        <!-- 应用图标 -->
        <view class="app-icon-container">
          <view class="app-icon">
             <image class="app-icon-image" src="/static/aboutUsAppIcon.png" mode=""></image>
          </view>
        </view>
        
        <!-- 应用名称 -->
        <text class="app-name">Solve X</text>
      </view>
      
      <!-- 菜单选项区域 -->
      <view class="menu-section">
        <view class="menu-item" @tap="handleVersionUpdate">
          <text class="menu-text">版本更新</text>
          <view class="arrow-icon">
			  <uni-icons type="right" color="#999999" size="20" ></uni-icons>
		  </view>
        </view>
        
        <view class="menu-item" @tap="handleUserAgreement">
          <text class="menu-text">用户协议</text>
          <view class="arrow-icon">
			   <uni-icons type="right" color="#999999" size="20" ></uni-icons>
		  </view>
        </view>
        
        <view class="menu-item" @tap="handlePrivacyPolicy">
          <text class="menu-text">隐私政策</text>
          <view class="arrow-icon">
			   <uni-icons type="right" color="#999999" size="20" ></uni-icons>
		  </view>
        </view>
        
        <!-- 微信小程序使用 button 打开客服 -->
        <button v-if="isWeixinMP" class="menu-item menu-button" open-type="contact">
          <text class="menu-text">官方客服</text>
          <view class="arrow-icon">
			   <uni-icons type="right" color="#999999" size="20" ></uni-icons>
		  </view>
        </button>

        <!-- 非微信小程序使用普通 view -->
        <view v-else class="menu-item" @tap="handleCustomerService">
          <text class="menu-text">官方客服</text>
          <view class="arrow-icon">
			   <uni-icons type="right" color="#999999" size="20" ></uni-icons>
		  </view>
        </view>
      </view>
      
      <!-- 版权信息区域 -->
      <view class="footer-section">
        <text class="icp-info">ICP备案号:京ICP备10046444号-67A</text>
        <text class="copyright-info">Copyright © 2014-2025 小米 保留所有权利</text>
      </view>
    </view>
  </view>
  </NavBar>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { isWeixinMiniProgram } from '../../utils/platform.js'

// 响应式数据
const appVersion = ref('1.0.0')

// 平台判断
const isWeixinMP = ref(isWeixinMiniProgram())

// 方法
const goBack = () => {
  uni.navigateBack()
}

// 版本更新
const handleVersionUpdate = () => {
  uni.showModal({
    title: '版本更新',
    content: `当前版本：${appVersion.value}\n\n暂无新版本可用`,
    showCancel: false,
    confirmText: '确定'
  })
}

// 用户协议
const handleUserAgreement = () => {
  uni.navigateTo({
    url: '/pages/user-agreement/user-agreement'
  })
}

// 隐私政策
const handlePrivacyPolicy = () => {
  uni.navigateTo({
    url: '/pages/privacy-policy/privacy-policy'
  })
}

// 官方客服
const handleCustomerService = () => {
  uni.showActionSheet({
    itemList: ['在线客服', '电话客服', '邮件客服'],
    success: (res) => {
      switch (res.tapIndex) {
        case 0:
          uni.showToast({
            title: '正在连接在线客服...',
            icon: 'loading',
            duration: 2000
          })
          break
        case 1:
          uni.makePhoneCall({
            phoneNumber: '400-123-4567'
          })
          break
        case 2:
          uni.setClipboardData({
            data: 'service@example.com',
            success: () => {
              uni.showToast({
                title: '邮箱地址已复制',
                icon: 'success'
              })
            }
          })
          break
      }
    }
  })
}

// 页面加载时初始化
onMounted(() => {
  loadAppInfo()
})

const loadAppInfo = () => {
  // 这里可以获取应用版本信息
  console.log('加载应用信息')
}
</script>

<style scoped>
.about-us-container {
  min-height: 100vh;
  background: white;
  position: relative;
  padding-top: 126rpx;
}

/* 状态栏 */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 40rpx 10rpx;
  background: transparent;
}

.status-time {
  font-size: 34rpx;
  font-weight: 600;
  color: #000;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.status-icons {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.status-icon {
  font-size: 24rpx;
  color: #000;
}

/* 导航栏 */
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 40rpx;
  background: transparent;
}

.back-button {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30rpx;
  background: rgba(0, 0, 0, 0.05);
}

.back-icon {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
}

.nav-placeholder {
  width: 60rpx;
  height: 60rpx;
  background: white;
  border-radius: 8rpx;
}

/* 主内容区域 */
.main-content {
  padding: 125rpx 40rpx 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100vh - 200rpx);
}

/* 应用信息区域 */
.app-info-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 148rpx;
}

.app-icon-container {
  margin-bottom: 40rpx;
}

.app-icon {
  width: 130rpx;
  height: 130rpx;
  background: linear-gradient(135deg, #E3F2FD 0%, #E1BEE7 100%);
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}
.app-icon-image{
	width: 130rpx;
	height: 130rpx;
}
.robot-character {
  position: relative;
  width: 120rpx;
  height: 120rpx;
}

.robot-antenna {
  position: absolute;
  top: -10rpx;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8rpx;
}

.antenna-dot {
  font-size: 8rpx;
  color: #9C27B0;
}

.robot-head {
  width: 60rpx;
  height: 60rpx;
  background: linear-gradient(135deg, #9C27B0 0%, #7B1FA2 100%);
  border-radius: 30rpx;
  position: relative;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.robot-eyes {
  display: flex;
  gap: 8rpx;
  margin-bottom: 4rpx;
}

.eye {
  font-size: 8rpx;
  color: white;
}

.robot-mouth {
  margin-top: 2rpx;
}

.mouth {
  font-size: 10rpx;
  color: white;
  font-weight: bold;
}

.robot-body {
  width: 80rpx;
  height: 30rpx;
  background: linear-gradient(135deg, #9C27B0 0%, #7B1FA2 100%);
  border-radius: 15rpx;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -5rpx;
}

.robot-screen {
  width: 50rpx;
  height: 20rpx;
  background: #00BCD4;
  border-radius: 6rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.screen-icon {
  font-size: 12rpx;
  color: white;
  font-weight: bold;
}

.robot-lower {
  width: 60rpx;
  height: 20rpx;
  background: linear-gradient(135deg, #9C27B0 0%, #7B1FA2 100%);
  border-radius: 10rpx;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -3rpx;
}

.body-x {
  font-size: 14rpx;
  color: white;
  font-weight: bold;
}

.robot-arm {
  position: absolute;
  right: -15rpx;
  top: 20rpx;
  z-index: 2;
}

.arm-hand {
  font-size: 20rpx;
  animation: wave 2s ease-in-out infinite;
}

@keyframes wave {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(20deg); }
}

.app-name {
  font-size: 48rpx;
  font-weight: 700;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 菜单选项区域 */
.menu-section {
  width: 100%;
  border-radius: 16rpx;
  margin-bottom: 60rpx;
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0rpx 40rpx 30rpx;
  transition: background-color 0.3s ease;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:active {
  background-color: #F5F5F5;
}

/* 微信小程序客服按钮样式 */
.menu-button {
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  padding: 30rpx 0rpx 40rpx 30rpx; /* 保持与 .menu-item 一致 */
  margin: 0;
  line-height: normal;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.3s ease;
}

.menu-button::after {
  border: none;
}

.menu-button:active {
  background-color: #F5F5F5;
}

.menu-text {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.arrow-icon {
  font-size: 28rpx;
  color: #999;
  font-weight: bold;
}

/* 版权信息区域 */
.footer-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
  margin-top: auto;
  padding-bottom: 40rpx;
}

.icp-info {
  font-size: 24rpx;
  color: #999;
  text-align: center;
  line-height: 1.4;
}

.copyright-info {
  font-size: 24rpx;
  color: #999;
  text-align: center;
  line-height: 1.4;
}

/* 响应式适配 */
@media screen and (max-width: 750rpx) {
  .main-content {
    padding: 40rpx 30rpx 30rpx;
  }
  
  .app-icon {
    width: 140rpx;
    height: 140rpx;
  }
  
  .robot-character {
    width: 100rpx;
    height: 100rpx;
  }
  
  .app-name {
    font-size: 42rpx;
  }
  
  .menu-item {
    padding: 24rpx 30rpx;
  }
  
  .menu-text {
    font-size: 30rpx;
  }
}

/* 安全区域适配 */
@supports (padding: max(0px)) {
  .about-us-container {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}
</style>

